<template>
<div class="vue-box">
	<div class="c-panel">
		<!-- 参数栏 -->
		<div class="c-title">检索参数</div>
		<el-form size="mini" :inline="true" @submit.native.prevent >
			<el-form-item label="人员姓名：">
				<el-input v-model="p.ename" placeholder="按姓名查询"></el-input>
			</el-form-item>
			<el-form-item label="出生日期：">
				<el-date-picker
					v-model="p.hiredate"
					type="daterange"
					range-separator="至"
					start-placeholder="开始日期"
					end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item style="min-width: 0px;">
				<el-button type="primary" icon="el-icon-search" @click="p.page = 1; init()">查询</el-button>
				<el-button type="primary" icon="el-icon-plus" @click="add()">添加</el-button>
			</el-form-item>
		</el-form>
		<!-- 数据列表 -->
		<div class="c-title">数据列表</div>
		<el-table :data="p.rows" size="mini">
			<el-table-column label="id" prop="empno" width="70px"></el-table-column>
			
			<el-table-column label="人员名称" prop="ename"></el-table-column>
			<el-table-column label="职务" prop="job"></el-table-column>
			<el-table-column label="入职日期" prop="hiredate"></el-table-column>
			<el-table-column label="上级领导" prop="mgr"></el-table-column>
			<el-table-column label="工资" prop="sal"></el-table-column>
			<el-table-column label="提成" prop="comm"></el-table-column>
			<el-table-column label="部门名称" prop="dname"></el-table-column>
			
			<el-table-column label="操作" width="240px">
				<template slot-scope="s">
					<el-button class="c-btn" type="success"  icon="el-icon-view" @click="get(s.row)">查看</el-button>
					<el-button class="c-btn" type="primary" icon="el-icon-edit" @click="update(s.row)">修改</el-button>
					<el-button class="c-btn" type="danger" icon="el-icon-delete" @click="del(s.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<div class="page-box">
			<el-pagination background
				layout="total, prev, pager, next, sizes, jumper" 
				:current-page.sync="p.page" 
				:page-size.sync="p.limit" 
				:total="p.count" 
				:page-sizes="[10, 20, 30, 40, 50, 100]" 
				@current-change="init()" 
				@size-change="init()">
			</el-pagination>
		</div>
	</div>
	<empadd ref="eadd"></empadd>
</div>
</template>

<script>
	import empadd from "./empadd.vue"
	export default{
		comments:{
			empadd
		},
		data(){
			return {
				p:{
					ename:"",
					hiredate:"",
					page:1,
					limit:10,
					count:0,
					rows:[]
				}
			}
		},
		methods:{
			add:function (){
				this.$refs['eadd'].open(0);
			}
		}
	}
</script>

<style scoped="scoped">
</style>
